

<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Blog - React</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:title" content="Blog - React">
  <meta property="og:type" content="website">
  <meta property="og:url" content="https://facebook.github.io/react/blog/page9/">
  <meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
  <meta property="og:description" content="A JavaScript library for building user interfaces">
  <meta property="fb:app_id" content="623268441017527">

  <link rel="shortcut icon" href="/favicon.ico">
  <link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.css" />
  <link rel="stylesheet" href="/css/syntax.css">
  <link rel="stylesheet" href="/css/codemirror.css">
  <link rel="stylesheet" href="/css/react.css">

  <script src="//use.typekit.net/vqa1hcx.js"></script>
  <script>try{Typekit.load();}catch(e){}</script>

  <!--[if lte IE 8]>
  <script src="/js/html5shiv.min.js"></script>
  <script src="/js/es5-shim.min.js"></script>
  <script src="/js/es5-sham.min.js"></script>
  <![endif]-->
  <script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/1/docsearch.min.js"></script>
  <script src="/js/codemirror.js"></script>
  <script src="/js/javascript.js"></script>
  <script src="/js/xml.js"></script>
  <script src="/js/jsx.js"></script>
  <script src="/js/react.js"></script>
  <script src="/js/react-dom.js"></script>
  <script src="/js/babel.min.js"></script>
  <script src="/js/live_editor.js"></script>
</head>
<body>

  <div class="container">

    <div class="nav-main">
  <div class="wrap">
    <a class="nav-home" href="/">
      <img class="nav-logo" src="/img/logo.svg" width="36" height="36">
      React
    </a>
    <div class="nav-lists">
      <ul class="nav-site nav-site-internal">
        <li><a href="/docs/hello-world.html">Docs</a></li>
        <li><a href="/tutorial/tutorial.html">Tutorial</a></li>
        <li><a href="/community/support.html">Community</a></li>
        <li><a href="/blog/" class="active">Blog</a></li>
        <li class="nav-site-search">
          <input id="algolia-doc-search" type="text" placeholder="Search docs..." />
        </li>
      </ul>
      <ul class="nav-site nav-site-external">
        <li><a href="https://github.com/facebook/react">GitHub</a></li>
        <li><a href="https://github.com/facebook/react/releases">v16.0.0-alpha.3</a></li>
      </ul>
    </div>
  </div>
</div>


    <section class="content wrap blogContent">
  <div class="nav-docs nav-blog">
  <div class="nav-docs-section">
    <h3>Recent posts</h3>
    <ul>
      
        <li><a href="/blog/2016/11/16/react-v15.4.0.html">React v15.4.0</a></li>
      
        <li><a href="/blog/2016/09/28/our-first-50000-stars.html">Our First 50,000 Stars</a></li>
      
        <li><a href="/blog/2016/08/05/relay-state-of-the-state.html">Relay: State of the State</a></li>
      
        <li><a href="/blog/2016/07/22/create-apps-with-no-configuration.html">Create Apps with No Configuration</a></li>
      
        <li><a href="/blog/2016/07/13/mixins-considered-harmful.html">Mixins Considered Harmful</a></li>
      
        <li><a href="/blog/2016/07/11/introducing-reacts-error-code-system.html">Introducing React's Error Code System</a></li>
      
        <li><a href="/blog/2016/04/08/react-v15.0.1.html">React v15.0.1</a></li>
      
        <li><a href="/blog/2016/04/07/react-v15.html">React v15.0</a></li>
      
        <li><a href="/blog/2016/03/29/react-v0.14.8.html">React v0.14.8</a></li>
      
        <li><a href="/blog/2016/03/16/react-v15-rc2.html">React v15.0 Release Candidate 2</a></li>
      
      <li><a href="/blog/all.html">All posts ...</a></li>
    </ul>
  </div>
</div>

  <div class="inner-content">
    
      <div class="post-list-item">
        

<h1>

  <a href="/blog/2015/03/16/react-v0.13.1.html">React v0.13.1</a>

</h1>

<p class="meta">
  March 16, 2015
  by
  
    
      <a href="https://twitter.com/zpao">Paul O’Shannessy</a>
    
    
  
</p>

<hr>

<div class="post">
  <p>It&#39;s been less than a week since we shipped v0.13.0 but it&#39;s time to do another quick release. We just released v0.13.1 which contains bugfixes for a number of small issues.</p>

<p>Thanks all of you who have been upgrading your applications and taking the time to report issues. And a huge thank you to those of you who submitted pull requests for the issues you found! 2 of the 6 fixes that went out today came from people who aren&#39;t on the core team!</p>

<p>The release is now available for download:</p>

<ul>
<li><strong>React</strong><br>
Dev build with warnings: <a href="https://fb.me/react-0.13.1.js">https://fb.me/react-0.13.1.js</a><br>
Minified build for production: <a href="https://fb.me/react-0.13.1.min.js">https://fb.me/react-0.13.1.min.js</a><br></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="https://fb.me/react-with-addons-0.13.1.js">https://fb.me/react-with-addons-0.13.1.js</a><br>
Minified build for production: <a href="https://fb.me/react-with-addons-0.13.1.min.js">https://fb.me/react-with-addons-0.13.1.min.js</a><br></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="https://fb.me/JSXTransformer-0.13.1.js">https://fb.me/JSXTransformer-0.13.1.js</a></li>
</ul>

<p>We&#39;ve also published version <code>0.13.1</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>

<hr>

<h2>Changelog</h2>

<h3>React Core</h3>

<h4>Bug Fixes</h4>

<ul>
<li>Don&#39;t throw when rendering empty <code>&lt;select&gt;</code> elements</li>
<li>Ensure updating <code>style</code> works when transitioning from <code>null</code></li>
</ul>

<h3>React with Add-Ons</h3>

<h3>Bug Fixes</h3>

<ul>
<li>TestUtils: Don&#39;t warn about <code>getDOMNode</code> for ES6 classes</li>
<li>TestUtils: Ensure wrapped full page components (<code>&lt;html&gt;</code>, <code>&lt;head&gt;</code>, <code>&lt;body&gt;</code>) are treated as DOM components</li>
<li>Perf: Stop double-counting DOM components</li>
</ul>

<h3>React Tools</h3>

<h4>Bug Fixes</h4>

<ul>
<li>Fix option parsing for <code>--non-strict-es6module</code></li>
</ul>

</div>



      </div>
    
      <div class="post-list-item">
        

<h1>

  <a href="/blog/2015/03/10/react-v0.13.html">React v0.13</a>

</h1>

<p class="meta">
  March 10, 2015
  by
  
    
      <a href="http://benalpert.com">Ben Alpert</a>
    
    
  
</p>

<hr>

<div class="post">
  <p>Today, we&#39;re happy to release React v0.13!</p>

<p>The most notable new feature is <a href="/blog/2015/01/27/react-v0.13.0-beta-1.html">support for ES6 classes</a>, which allows developers to have more flexibility when writing components. Our eventual goal is for ES6 classes to replace <code>React.createClass</code> completely, but until we have a replacement for current mixin use cases and support for class property initializers in the language, we don&#39;t plan to deprecate <code>React.createClass</code>.</p>

<p>At EmberConf and ng-conf last week, we were excited to see that Ember and Angular have been working on speed improvements and now both have performance comparable to React. We&#39;ve always thought that performance isn&#39;t the most important reason to choose React, but we&#39;re still planning more optimizations to <strong>make React even faster</strong>.</p>

<p>Our planned optimizations require that ReactElement objects are immutable, which has always been a best practice when writing idiomatic React code. In this release, we&#39;ve added runtime warnings that fire when props are changed or added between the time an element is created and when it&#39;s rendered. When migrating your code, you may want to use new <code>React.cloneElement</code> API (which is similar to <code>React.addons.cloneWithProps</code> but preserves <code>key</code> and <code>ref</code> and does not merge <code>style</code> or <code>className</code> automatically). For more information about our planned optimizations, see GitHub issues
<a href="https://github.com/facebook/react/issues/3226">#3226</a>,
<a href="https://github.com/facebook/react/issues/3227">#3227</a>,
<a href="https://github.com/facebook/react/issues/3228">#3228</a>.</p>

<p>The release is now available for download:</p>

<ul>
<li><strong>React</strong><br>
Dev build with warnings: <a href="https://fb.me/react-0.13.0.js">https://fb.me/react-0.13.0.js</a><br>
Minified build for production: <a href="https://fb.me/react-0.13.0.min.js">https://fb.me/react-0.13.0.min.js</a><br></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="https://fb.me/react-with-addons-0.13.0.js">https://fb.me/react-with-addons-0.13.0.js</a><br>
Minified build for production: <a href="https://fb.me/react-with-addons-0.13.0.min.js">https://fb.me/react-with-addons-0.13.0.min.js</a><br></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="https://fb.me/JSXTransformer-0.13.0.js">https://fb.me/JSXTransformer-0.13.0.js</a></li>
</ul>

<p>We&#39;ve also published version <code>0.13.0</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>

<hr>

<h2>Changelog</h2>

<h3>React Core</h3>

<h4>Breaking Changes</h4>

<ul>
<li>Deprecated patterns that warned in 0.12 no longer work: most prominently, calling component classes without using JSX or React.createElement and using non-component functions with JSX or createElement</li>
<li>Mutating <code>props</code> after an element is created is deprecated and will cause warnings in development mode; future versions of React will incorporate performance optimizations assuming that props aren&#39;t mutated</li>
<li>Static methods (defined in <code>statics</code>) are no longer autobound to the component class</li>
<li><code>ref</code> resolution order has changed slightly such that a ref to a component is available immediately after its <code>componentDidMount</code> method is called; this change should be observable only if your component calls a parent component&#39;s callback within your <code>componentDidMount</code>, which is an anti-pattern and should be avoided regardless</li>
<li>Calls to <code>setState</code> in life-cycle methods are now always batched and therefore asynchronous. Previously the first call on the first mount was synchronous.</li>
<li><code>setState</code> and <code>forceUpdate</code> on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises.</li>
<li>Access to most internal properties has been completely removed, including <code>this._pendingState</code> and <code>this._rootNodeID</code>.</li>
</ul>

<h4>New Features</h4>

<ul>
<li>Support for using ES6 classes to build React components; see the <a href="/blog/2015/01/27/react-v0.13.0-beta-1.html">v0.13.0 beta 1 notes</a> for details.</li>
<li>Added new top-level API <code>React.findDOMNode(component)</code>, which should be used in place of <code>component.getDOMNode()</code>. The base class for ES6-based components will not have <code>getDOMNode</code>. This change will enable some more patterns moving forward.</li>
<li>Added a new top-level API <code>React.cloneElement(el, props)</code> for making copies of React elements – see the <a href="/blog/2015/03/03/react-v0.13-rc2.html#react.cloneelement">v0.13 RC2 notes</a> for more details.</li>
<li>New <code>ref</code> style, allowing a callback to be used in place of a name: <code>&lt;Photo ref={(c) =&gt; this._photo = c} /&gt;</code> allows you to reference the component with <code>this._photo</code> (as opposed to <code>ref=&quot;photo&quot;</code> which gives <code>this.refs.photo</code>).</li>
<li><code>this.setState()</code> can now take a function as the first argument for transactional state updates, such as <code>this.setState((state, props) =&gt; ({count: state.count + 1}));</code> – this means that you no longer need to use <code>this._pendingState</code>, which is now gone.</li>
<li>Support for iterators and immutable-js sequences as children.</li>
</ul>

<h4>Deprecations</h4>

<ul>
<li><code>ComponentClass.type</code> is deprecated. Just use <code>ComponentClass</code> (usually as <code>element.type === ComponentClass</code>).</li>
<li>Some methods that are available on <code>createClass</code>-based components are removed or deprecated from ES6 classes (<code>getDOMNode</code>, <code>replaceState</code>, <code>isMounted</code>, <code>setProps</code>, <code>replaceProps</code>).</li>
</ul>

<h3>React with Add-Ons</h3>

<h4>New Features</h4>

<ul>
<li><a href="/docs/create-fragment.html"><code>React.addons.createFragment</code> was added</a> for adding keys to entire sets of children.</li>
</ul>

<h4>Deprecations</h4>

<ul>
<li><code>React.addons.classSet</code> is now deprecated. This functionality can be replaced with several freely available modules. <a href="https://www.npmjs.com/package/classnames">classnames</a> is one such module.</li>
<li>Calls to <code>React.addons.cloneWithProps</code> can be migrated to use <code>React.cloneElement</code> instead – make sure to merge <code>style</code> and <code>className</code> manually if desired.</li>
</ul>

<h3>React Tools</h3>

<h4>Breaking Changes</h4>

<ul>
<li>When transforming ES6 syntax, <code>class</code> methods are no longer enumerable by default, which requires <code>Object.defineProperty</code>; if you support browsers such as IE8, you can pass <code>--target es3</code> to mirror the old behavior</li>
</ul>

<h4>New Features</h4>

<ul>
<li><code>--target</code> option is available on the jsx command, allowing users to specify and ECMAScript version to target.

<ul>
<li><code>es5</code> is the default.</li>
<li><code>es3</code> restores the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg <code>this.static</code> will become <code>this[&#39;static&#39;]</code> for IE8 compatibility).</li>
</ul></li>
<li>The transform for the call spread operator has also been enabled.</li>
</ul>

<h3>JSX</h3>

<h4>Breaking Changes</h4>

<ul>
<li>A change was made to how some JSX was parsed, specifically around the use of <code>&gt;</code> or <code>}</code> when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. The <a href="https://www.npmjs.com/package/jsx_orphaned_brackets_transformer"><code>jsx_orphaned_brackets_transformer</code></a> package on npm can be used to find and fix potential issues in your JSX code.</li>
</ul>

</div>



      </div>
    
      <div class="post-list-item">
        

<h1>

  <a href="/blog/2015/03/04/community-roundup-25.html">Community Round-up #25</a>

</h1>

<p class="meta">
  March  4, 2015
  by
  
    
      <a href="https://github.com/matthewathome">Matthew Johnston</a>
    
    
  
</p>

<hr>

<div class="post">
  <h2>React 101</h2>

<p>Interest in React has been exploding recently, so it&#39;s a good time to explore some great recent tutorials and videos that cover getting started.</p>

<p><a href="https://github.com/rynclark">Ryan Clark</a> provides a <a href="http://ryanclark.me/getting-started-with-react/">great overview of the basics of React</a> with the goal of building a really simple dropdown nav.</p>

<p><a href="https://github.com/FormidableLabs">Formidable Labs</a> and <a href="http://www.meetup.com/seattlejs/">Seattle JS</a> recently hosted a series of React, Flux, and Flow workshops, and the first part is available to watch online:</p>

<iframe width="100%" height="300" src="//www.youtube-nocookie.com/embed/Pd6Ub7Ju2RM" frameborder="0" allowfullscreen></iframe>

<p><a href="https://github.com/aearly">AEFlash</a> writes up <a href="http://aeflash.com/2015-02/react-tips-and-best-practices.html">some best practices and tips</a> to help you avoid potential pitfalls when developing with React.</p>

<p>Black Mutt Media <a href="http://blackmuttmedia.com/blog/react-tmdb-api/">takes us through their usage of React</a> and Ruby to build an autocomplete field, and some of the pitfalls they encountered along the way.</p>

<p>Our own <a href="https://github.com/sebmarkbage">Sebastian Markbåge</a> was on the <a href="http://thewebplatform.libsyn.com/31-building-with-reactjs">Web Platform Podcast</a> to have a chat about all aspects of React.</p>

<iframe style="border: none" src="//html5-player.libsyn.com/embed/episode/id/3370114/height/75/width/200/theme/standard-mini/direction/no/autoplay/no/autonext/no/thumbnail/yes/preload/no/no_addthis/no/" height="26" width="100%" scrolling="no" allowfullscreen="" webkitallowfullscreen="" mozallowfullscreen="" oallowfullscreen="" msallowfullscreen=""></iframe>

<h2>Community Additions</h2>

<p><a href="https://github.com/FormidableLabs">Formidable Labs</a> have been busy, as they&#39;ve also<a href="http://projects.formidablelabs.com/radium/"> just launched Radium</a>, a React component that provides you with the ability to use inline styles instead of CSS. They&#39;re also <a href="http://projects.formidablelabs.com/radium-bootstrap/">looking for some help</a> contributing to a Radium Bootstrap implementation.</p>

<p><a href="http://reactiflux.com/">Reactiflux.com</a> is a new Slack community based around (you guessed it!) React, and Flux.</p>

<p><a href="http://reactweek.com/">React Week</a> is a week-long learning workshop, happening next week, for React, Flux, and other related technologies, run by <a href="https://github.com/ryanflorence">Ryan Florence</a>.</p>

<p><a href="https://github.com/babel/babel-sublime">Babel-sublime</a> is a new package which provides Sublime with language definitions for ES6 JavaScript with React JSX syntax extensions.</p>

<p><a href="https://github.com/reactjs/react-meteor">react-meteor</a>, a package that replaces the default templating system of the Meteor platform with React, recently received a big update.</p>

<h2>Rebuilding with React</h2>

<p><a href="https://github.com/rmanalan">Rich Manalang</a> from Atlassian <a href="https://developer.atlassian.com/blog/2015/02/rebuilding-hipchat-with-react/">explains why</a> they rebuilt their HipChat web client from scratch using React, and how they&#39;re already using it to rebuild their native desktop clients.</p>

<p><a href="https://twitter.com/andyhillel">Andrew Hillel</a> of the BBC gives <a href="http://www.bbc.co.uk/blogs/internet/entries/47a96d23-ae04-444e-808f-678e6809765d">an excellent and thorough breakdown</a> of the stack they used to rebuild their homepage, with React as an integral part of the front-end.</p>

<p>A team from New Zealand called <a href="https://atomic.io/">Atomic</a> is <a href="http://thenextweb.com/creativity/2015/02/19/meet-atomic-missing-tool-interface-design-thats-entirely-browser/">building web and mobile prototyping and design tools</a> entirely in-browser, and as co-founder <a href="https://twitter.com/darrylgray">Darryl Gray</a> says, “React.js “totally changed” the fact that browser performance often wasn’t good enough for complex tools like this.”.</p>

<p><a href="https://github.com/Polarrco">Polarr</a> have rebuilt <a href="http://polarrist.tumblr.com/post/111290422225/polarr-photo-editor-2-0-alpha-is-here">their browser-based photo editor</a> with React.</p>

<p><center><a href="http://polarrist.tumblr.com/post/111290422225/polarr-photo-editor-2-0-alpha-is-here"><img src="/img/blog/polarr.jpg"></a></center></p>

<h2>It&#39;s F8!</h2>

<p>F8 2015 is just around the corner, and you can <a href="https://www.fbf8.com/stream.html">sign up for the video streams</a> in advance because we&#39;re sure to be covering all things React.</p>

<h2>Meetups</h2>

<table><tr><td width="50%" valign="top">
<blockquote class="twitter-tweet" lang="en"><p>Our <a href="https://twitter.com/reactjs">@reactjs</a> meetup is in full effect <a href="https://twitter.com/hashtag/ReactJS?src=hash">#ReactJS</a> &#10;&#10;btw bathroom code is 6012 lol <a href="http://t.co/7iUpvmm3zz">pic.twitter.com/7iUpvmm3zz</a></p>&mdash; littleBits (@littleBits) <a href="https://twitter.com/littleBits/status/570373833028472832">February 25, 2015</a></blockquote>
</td><td width="50%" valign="top">
<blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/yrezgui">@yrezgui</a> captivating us with <a href="https://twitter.com/reactjs">@reactjs</a> at <a href="https://twitter.com/DevRocketUK">@DevRocketUK</a>. Thanks to the amazing sponsors <a href="https://twitter.com/makersacademy">@makersacademy</a> and <a href="https://twitter.com/couchbase">@couchbase</a>. <a href="http://t.co/xwA773omky">pic.twitter.com/xwA773omky</a></p>&mdash; James Nocentini (@jamiltz) <a href="https://twitter.com/jamiltz/status/570306188577001473">February 24, 2015</a></blockquote>
</td></tr><tr><td width="50%" valign="top">
<blockquote class="twitter-tweet" lang="en"><p>Listening to a bunch of very clever geekoids at the <a href="https://twitter.com/reactjs">@reactjs</a> seminar. Nice! <a href="http://t.co/0TeTOJOerO">pic.twitter.com/0TeTOJOerO</a></p>&mdash; Nick Middleweek (@nmiddleweek) <a href="https://twitter.com/nmiddleweek/status/568183658395394049">February 18, 2015</a></blockquote>
</td><td width="50%" valign="top">
<blockquote class="twitter-tweet" lang="en"><p>Watching the <a href="https://twitter.com/FrontendMasters">@FrontendMasters</a> ReactJS workshop! <a href="http://t.co/YraYIK97Lu">pic.twitter.com/YraYIK97Lu</a></p>&mdash; ReactJS News (@ReactJSNews) <a href="https://twitter.com/ReactJSNews/status/566269552112041985">February 13, 2015</a></blockquote>
</td></tr></table>

</div>



      </div>
    
      <div class="post-list-item">
        

<h1>

  <a href="/blog/2015/03/03/react-v0.13-rc2.html">React v0.13 RC2</a>

</h1>

<p class="meta">
  March  3, 2015
  by
  
    
      <a href="https://twitter.com/sebmarkbage">Sebastian Markbåge</a>
    
    
  
</p>

<hr>

<div class="post">
  <p>Thanks to everybody who has already been testing the release candidate. We&#39;ve received some good feedback and as a result we&#39;re going to do a second release candidate. The changes are minimal. We haven&#39;t changed the behavior of any APIs we exposed in the previous release candidate. Here&#39;s a summary of the changes:</p>

<ul>
<li>Introduced a new API (<code>React.cloneElement</code>, see below for details).</li>
<li>Fixed a bug related to validating <code>propTypes</code> when using the new <code>React.addons.createFragment</code> API.</li>
<li>Improved a couple warning messages.</li>
<li>Upgraded jstransform and esprima.</li>
</ul>

<p>The release candidate is available for download:</p>

<ul>
<li><strong>React</strong><br>
Dev build with warnings: <a href="https://fb.me/react-0.13.0-rc2.js">https://fb.me/react-0.13.0-rc2.js</a><br>
Minified build for production: <a href="https://fb.me/react-0.13.0-rc2.min.js">https://fb.me/react-0.13.0-rc2.min.js</a><br></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="https://fb.me/react-with-addons-0.13.0-rc2.js">https://fb.me/react-with-addons-0.13.0-rc2.js</a><br>
Minified build for production: <a href="https://fb.me/react-with-addons-0.13.0-rc2.min.js">https://fb.me/react-with-addons-0.13.0-rc2.min.js</a><br></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="https://fb.me/JSXTransformer-0.13.0-rc2.js">https://fb.me/JSXTransformer-0.13.0-rc2.js</a></li>
</ul>

<p>We&#39;ve also published version <code>0.13.0-rc2</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>

<hr>

<h2>React.cloneElement</h2>

<p>In React v0.13 RC2 we will introduce a new API, similar to <code>React.addons.cloneWithProps</code>, with this signature:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="nx">React</span><span class="p">.</span><span class="nx">cloneElement</span><span class="p">(</span><span class="nx">element</span><span class="p">,</span> <span class="nx">props</span><span class="p">,</span> <span class="p">...</span><span class="nx">children</span><span class="p">);</span>
</code></pre></div>
<p>Unlike <code>cloneWithProps</code>, this new function does not have any magic built-in behavior for merging <code>style</code> and <code>className</code> for the same reason we don&#39;t have that feature from <code>transferPropsTo</code>. Nobody is sure what exactly the complete list of magic things are, which makes it difficult to reason about the code and difficult to reuse when <code>style</code> has a different signature (e.g. in the upcoming React Native).</p>

<p><code>React.cloneElement</code> is <em>almost</em> equivalent to:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="o">&lt;</span><span class="nx">element</span><span class="p">.</span><span class="nx">type</span> <span class="p">{...</span><span class="nx">element</span><span class="p">.</span><span class="nx">props</span><span class="p">}</span> <span class="p">{...</span><span class="nx">props</span><span class="p">}</span><span class="o">&gt;</span><span class="p">{</span><span class="nx">children</span><span class="p">}</span><span class="o">&lt;</span><span class="err">/element.type&gt;</span>
</code></pre></div>
<p>However, unlike JSX and <code>cloneWithProps</code>, it also preserves <code>ref</code>s. This means that if you get a child with a <code>ref</code> on it, you won&#39;t accidentally steal it from your ancestor. You will get the same <code>ref</code> attached to your new element.</p>

<p>One common pattern is to map over your children and add a new prop. There were many issues reported about <code>cloneWithProps</code> losing the ref, making it harder to reason about your code. Now following the same pattern with <code>cloneElement</code> will work as expected. For example:</p>
<div class="highlight"><pre><code class="language-js" data-lang="js"><span class="kd">var</span> <span class="nx">newChildren</span> <span class="o">=</span> <span class="nx">React</span><span class="p">.</span><span class="nx">Children</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">children</span><span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">child</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="nx">React</span><span class="p">.</span><span class="nx">cloneElement</span><span class="p">(</span><span class="nx">child</span><span class="p">,</span> <span class="p">{</span> <span class="nx">foo</span><span class="o">:</span> <span class="kc">true</span> <span class="p">})</span>
<span class="p">});</span>
</code></pre></div>
<blockquote>
<p>Note: <code>React.cloneElement(child, { ref: &#39;newRef&#39; })</code> <em>DOES</em> override the <code>ref</code> so it is still not possible for two parents to have a ref to the same child, unless you use callback-refs.</p>
</blockquote>

<p>This was a critical feature to get into React 0.13 since props are now immutable. The upgrade path is often to clone the element, but by doing so you might lose the <code>ref</code>. Therefore, we needed a nicer upgrade path here. As we were upgrading callsites at Facebook we realized that we needed this method. We got the same feedback from the community. Therefore we decided to make another RC before the final release to make sure we get this in.</p>

<p>We plan to eventually deprecate <code>React.addons.cloneWithProps</code>. We&#39;re not doing it yet, but this is a good opportunity to start thinking about your own uses and consider using <code>React.cloneElement</code> instead. We&#39;ll be sure to ship a release with deprecation notices before we actually remove it so no immediate action is necessary.</p>

</div>



      </div>
    
      <div class="post-list-item">
        

<h1>

  <a href="/blog/2015/02/24/react-v0.13-rc1.html">React v0.13 RC</a>

</h1>

<p class="meta">
  February 24, 2015
  by
  
    
      <a href="https://twitter.com/zpao">Paul O’Shannessy</a>
    
    
  
</p>

<hr>

<div class="post">
  <p>Over the weekend we pushed out our first (and hopefully only) release candidate for React v0.13!</p>

<p>We&#39;ve talked a little bit about the changes that are coming. The splashiest of these changes is support for ES6 Classes. You can read more about this in <a href="/blog/2015/01/27/react-v0.13.0-beta-1.html">our beta announcement</a>. We&#39;re really excited about this! Sebastian also posted earlier this morning about <a href="/blog/2015/02/24/streamlining-react-elements.html">some of the other changes coming focused around ReactElement</a>. The changes we&#39;ve been working on there will hopefully enable lots of improvements to performance and developer experience.</p>

<p>The release candidate is available for download:</p>

<ul>
<li><strong>React</strong><br>
Dev build with warnings: <a href="https://fb.me/react-0.13.0-rc1.js">https://fb.me/react-0.13.0-rc1.js</a><br>
Minified build for production: <a href="https://fb.me/react-0.13.0-rc1.min.js">https://fb.me/react-0.13.0-rc1.min.js</a><br></li>
<li><strong>React with Add-Ons</strong><br>
Dev build with warnings: <a href="https://fb.me/react-with-addons-0.13.0-rc1.js">https://fb.me/react-with-addons-0.13.0-rc1.js</a><br>
Minified build for production: <a href="https://fb.me/react-with-addons-0.13.0-rc1.min.js">https://fb.me/react-with-addons-0.13.0-rc1.min.js</a><br></li>
<li><strong>In-Browser JSX transformer</strong><br>
<a href="https://fb.me/JSXTransformer-0.13.0-rc1.js">https://fb.me/JSXTransformer-0.13.0-rc1.js</a></li>
</ul>

<p>We&#39;ve also published version <code>0.13.0-rc1</code> of the <code>react</code> and <code>react-tools</code> packages on npm and the <code>react</code> package on bower.</p>

<hr>

<h2>Changelog</h2>

<h3>React Core</h3>

<h4>Breaking Changes</h4>

<ul>
<li>Mutating <code>props</code> after an element is created is deprecated and will cause warnings in development mode; future versions of React will incorporate performance optimizations assuming that props aren&#39;t mutated</li>
<li>Static methods (defined in <code>statics</code>) are no longer autobound to the component class</li>
<li><code>ref</code> resolution order has changed slightly such that a ref to a component is available immediately after its <code>componentDidMount</code> method is called; this change should be observable only if your component calls a parent component&#39;s callback within your <code>componentDidMount</code>, which is an anti-pattern and should be avoided regardless</li>
<li>Calls to <code>setState</code> in life-cycle methods are now always batched and therefore asynchronous. Previously the first call on the first mount was synchronous.</li>
<li><code>setState</code> and <code>forceUpdate</code> on an unmounted component now warns instead of throwing. That avoids a possible race condition with Promises.</li>
<li>Access to most internal properties has been completely removed, including <code>this._pendingState</code> and <code>this._rootNodeID</code>.</li>
</ul>

<h4>New Features</h4>

<ul>
<li>Support for using ES6 classes to build React components; see the <a href="/blog/2015/01/27/react-v0.13.0-beta-1.html">v0.13.0 beta 1 notes</a> for details</li>
<li>Added new top-level API <code>React.findDOMNode(component)</code>, which should be used in place of <code>component.getDOMNode()</code>. The base class for ES6-based components will not have <code>getDOMNode</code>. This change will enable some more patterns moving forward.</li>
<li>New <code>ref</code> style, allowing a callback to be used in place of a name: <code>&lt;Photo ref={(c) =&gt; this._photo = c} /&gt;</code> allows you to reference the component with <code>this._photo</code> (as opposed to <code>ref=&quot;photo&quot;</code> which gives <code>this.refs.photo</code>)</li>
<li><code>this.setState()</code> can now take a function as the first argument for transactional state updates, such as <code>this.setState((state, props) =&gt; ({count: state.count + 1}));</code> -- this means that you no longer need to use <code>this._pendingState</code>, which is now gone.</li>
<li>Support for iterators and immutable-js sequences as children</li>
</ul>

<h4>Deprecations</h4>

<ul>
<li><code>ComponentClass.type</code> is deprecated. Just use <code>ComponentClass</code> (usually as <code>element.type === ComponentClass</code>)</li>
<li>Some methods that are available on <code>createClass</code>-based components are removed or deprecated from ES6 classes (for example, <code>getDOMNode</code>, <code>setProps</code>, <code>replaceState</code>).</li>
</ul>

<h3>React with Add-Ons</h3>

<h4>Deprecations</h4>

<ul>
<li><code>React.addons.classSet</code> is now deprecated. This functionality can be replaced with several freely available modules. <a href="https://www.npmjs.com/package/classnames">classnames</a> is one such module.</li>
</ul>

<h3>React Tools</h3>

<h4>Breaking Changes</h4>

<ul>
<li>When transforming ES6 syntax, <code>class</code> methods are no longer enumerable by default, which requires <code>Object.defineProperty</code>; if you support browsers such as IE8, you can pass <code>--target es3</code> to mirror the old behavior</li>
</ul>

<h4>New Features</h4>

<ul>
<li><code>--target</code> option is available on the jsx command, allowing users to specify and ECMAScript version to target.

<ul>
<li><code>es5</code> is the default.</li>
<li><code>es3</code> restored the previous default behavior. An additional transform is added here to ensure the use of reserved words as properties is safe (eg <code>this.static</code> will become <code>this[&#39;static&#39;]</code> for IE8 compatibility).</li>
</ul></li>
<li>The transform for the call spread operator has also been enabled.</li>
</ul>

<h3>JSX</h3>

<h4>Breaking Changes</h4>

<ul>
<li>A change was made to how some JSX was parsed, specifically around the use of <code>&gt;</code> or <code>}</code> when inside an element. Previously it would be treated as a string but now it will be treated as a parse error. We will be releasing a standalone executable to find and fix potential issues in your JSX code.</li>
</ul>

</div>



      </div>
    

    <div class="pagination">
      
        <a href="/blog/page8/" class="previous">
          &laquo; Previous Page
        </a>
      
      
        <a href="/blog/page10/" class="next">
          Next Page &raquo;
        </a>
      
    </div>
  </div>
</section>


    <footer class="nav-footer">
  <section class="sitemap">
    <a href="/" class="nav-home">
    </a>
    <div>
      <h5><a href="/docs/">Docs</a></h5>
      <a href="/docs/hello-world.html">Quick Start</a>
      <a href="/docs/thinking-in-react.html">Thinking in React</a>
      <a href="/tutorial/tutorial.html">Tutorial</a>
      <a href="/docs/jsx-in-depth.html">Advanced Guides</a>
    </div>
    <div>
      <h5><a href="/community/support.html">Community</a></h5>
      <a href="http://stackoverflow.com/questions/tagged/reactjs" target="_blank">Stack Overflow</a>
      <a href="https://discuss.reactjs.org/" target="_blank">Discussion Forum</a>
      <a href="https://discord.gg/0ZcbPKXt5bZjGY5n" target="_blank">Reactiflux Chat</a>
      <a href="https://www.facebook.com/react" target="_blank">Facebook</a>
      <a href="https://twitter.com/reactjs" target="_blank">Twitter</a>
    </div>
    <div>
      <h5><a href="/community/support.html">Resources</a></h5>
      <a href="/community/conferences.html">Conferences</a>
      <a href="/community/videos.html">Videos</a>
      <a href="https://github.com/facebook/react/wiki/Examples" target="_blank">Examples</a>
      <a href="https://github.com/facebook/react/wiki/Complementary-Tools" target="_blank">Complementary Tools</a>
    </div>
    <div>
      <h5>More</h5>
      <a href="/blog/">Blog</a>
      <a href="https://github.com/facebook/react" target="_blank">GitHub</a>
      <a href="http://facebook.github.io/react-native/" target="_blank">React Native</a>
      <a href="/acknowledgements.html">Acknowledgements</a>
    </div>
  </section>
  <a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource">
    <img src="/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/>
  </a>
  <section class="copyright">
    Copyright © 2017 Facebook Inc.
  </section>
</footer>

  </div>

  <div id="fb-root"></div>
  <script src="/js/anchor-links.js"></script>
  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');
    ga('create', 'UA-41298772-1', 'facebook.github.io');
    ga('send', 'pageview');

    !function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="https://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");

    (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) return;
      js = d.createElement(s); js.id = id;
      js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=623268441017527";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'facebook-jssdk'));

    docsearch({
      apiKey: '36221914cce388c46d0420343e0bb32e',
      indexName: 'react',
      inputSelector: '#algolia-doc-search'
    });
  </script>
</body>
</html>
